import React, { Component } from 'react'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import './App.css'
export default class App extends Component {
  state = {
    // 一打开页面就立刻从localstorage中获取缓存数据
    // 用户第一次打开这个应用,localStorage中一定没有todos数据,则返回值为null.此时我们需要给todoList赋值一个默认值为空数组
    todoList: JSON.parse(localStorage.getItem('todos')) || [],
  }
  //这个函数用于接收Header组件传递过来的任务名
  getTodoName = (todoName) => {
    // 根据任务名创建任务对象
    const todo = {
      todoName,
      id: Date.now(),
      isDone: false,
    }

    // 根据旧的todoList,创建一个新的newTodoList
    const newTodoList = [...this.state.todoList]
    // 往新数组中添加数据
    newTodoList.push(todo)

    this.setState({
      todoList: newTodoList,
    })
  }
  // 这个函数用于接收Item组件传过来的id,最终修改任务数据的isDone
  getTodoIdUpdate = (id) => {
    // console.log(id)
    const newtodoList = this.state.todoList.map((item) => {
      if (item.id === id) {
        item.isDone = !item.isDone
      }
      return item
    })

    this.setState({
      todoList: newtodoList,
    })
  }
  // 用于删除任务数据的函数
  getTodoIdDel = (id) => {
    // 根据id,删除数据
    const newTodoList = this.state.todoList.filter((item) => {
      return item.id !== id
    })
    this.setState({
      todoList: newTodoList,
    })
  }

  // 全选按钮触发的函数
  // 需求: 如果全选都选中了,则所有的数据都选中,
  // 如果全选取消了,则所有的数据都不选中
  // 其实就是修改数据中所有数据的isDone
  getTodoIsDone = () => {
    // 要自己计算,到底要把数据的isDone改成true还是false
    // 如果当前数据中,每一个数据的isDone都是true,接下来每一个数据的isDone要改成false. 如果所有数据中,只要有一个是false,接下来所有的数据的isDone都要改成true
    const result = this.state.todoList.every((item) => item.isDone)

    // 如果result的值是true,那么接下来所以的数据,都要改成false. 如果result是false,所有数据都改成true
    const newTodoList = this.state.todoList.map((item) => {
      item.isDone = !result
      return item
    })
    this.setState({
      todoList: newTodoList,
    })

    // console.log(result)
  }

  // 删除所有已经完成的任务
  clearAllDone = () => {
    const newTodoList = this.state.todoList.filter((item) => !item.isDone)
    this.setState({
      todoList: newTodoList,
    })
  }

  // 获取编辑的id和todoName,对指定数据进行修改
  editTodoHandle = (id, todoName) => {
    const newTodoList = this.state.todoList.map((item) => {
      if (item.id === id) {
        item.todoName = todoName
        item.isDone = false
      }
      return item
    })
    this.setState({
      todoList: newTodoList,
    })
    
  }
  render() {
    const { todoList } = this.state
    // 只要数据修改,就需要将最新的数据存储到localStorage中. 不管怎么改数据,都会调用setState,从而触发render函数重新执行.并且在render函数中,可以拿到修改之后的最新的数据. 所以我们可以直接将存储到localStorage里面的代码写在render中
    localStorage.setItem('todos', JSON.stringify(todoList))
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header getTodoName={this.getTodoName}></Header>
          {todoList.length ? (
            <div>
              <List
                todos={todoList}
                getTodoIdUpdate={this.getTodoIdUpdate}
                getTodoIdDel={this.getTodoIdDel}
                editTodoHandle={this.editTodoHandle}
              ></List>
              <Footer
                todos={todoList}
                getTodoIsDone={this.getTodoIsDone}
                clearAllDone={this.clearAllDone}
              ></Footer>
            </div>
          ) : (
            <h1>恭喜您,暂无任务</h1>
          )}
        </div>
      </div>
    )
  }
}
